/cody/codingstella/projects/Glassmorphism%20Analog%20Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/css/style.css
* {    margin: 0;    padding: 0;    box-sizing: border-box;}
body {    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background: #111;}
.container {    position: relative;}
.container .circle {    position: absolute;    border-radius: 50%;    pointer-events: none;    animation: 2s ease-in infinite alternate;}
.container .circle:nth-child(1) {    width: 180px;    height: 180px;    top: -60px;    left: -60px;    background: linear-gradient(        #e524c3, #8626b2    );    animation-name: move-up;}
@keyframes move-up {    to {        transform: translateY(-10px);    }}
.container .circle:nth-child(2) {    width: 120px;    height: 120px;    bottom: -20px;    right: -20px;    background: linear-gradient(        #d64612, #e48307    );    animation-name: move-down;}
@keyframes move-down {    to {        transform: translateY(10px);    }}
.clock {    width: 350px;    height: 350px;    display: flex;    align-items: center;    justify-content: center;    border: 2px solid rgba(255, 255, 255, .1);    border-radius: 50%;    backdrop-filter: blur(15px);    background: rgba(255, 255, 255, .05);    box-shadow: 0 0 30px rgba(0, 0, 0, .2);}
.clock .clock-bg img {    width: 100%;    height: 100%;}
.clock::before {    content: '';    position: absolute;    width: 15px;    height: 15px;    background: #fff;    border-radius: 50%;    z-index: 15;}
.clock .hour,.clock .minute,.clock .second {    position: absolute;}
.clock .hour,.clock .hour .hr {    width: 160px;    height: 160px;}
.clock .minute,.clock .minute .min {    width: 190px;    height: 190px;}
.clock .second,.clock .second .sec {    width: 230px;    height: 230px;}
.clock .hour .hr,.clock .minute .min,.clock .second .sec {    display: flex;    justify-content: center;    position: absolute;    border-radius: 50%;}
.clock .hour .hr::before {    content: '';    position: absolute;    width: 8px;    height: 80px;    background: #ff3d68;    z-index: 10;    border-radius: 10px;}
.clock .minute .min::before {    content: '';    position: absolute;    width: 4px;    height: 90px;    background: #39a2db;    z-index: 11;    border-radius: 8px;}
.clock .second .sec::before {    content: '';    position: absolute;    width: 3px;    height: 140px;    background: #fff;    z-index: 12;    border-radius: 2px;}